<!DOCTYPE html>
<html>
<head>
<title>管理员列表</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="../../libs/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="../../element-ui/lib/index.js"></script>
</head>
<body>

<div  id="app" >

	<div v-show="showList">
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
		<el-form-item label="审批人">
			<el-input v-model="formInline.user" placeholder="审批人"></el-input>
		</el-form-item>
		<el-form-item label="活动区域">
			<el-select v-model="formInline.region" placeholder="活动区域">
				<el-option label="区域一" value="shanghai"></el-option>
				<el-option label="区域二" value="beijing"></el-option>
			</el-select>
		</el-form-item><el-form-item>
		<el-button type="primary" @click="onSubmit">查询</el-button>
		<el-button type="primary" @click="add">新增</el-button>
	</el-form-item>
	</el-form>


	<el-table
			:data="tableData"
			border
			style="width: 100%">
		<el-table-column
				fixed
				prop="date"
				label="日期"
				width="150">
		</el-table-column>
		<el-table-column
				prop="name"
				label="姓名"
				width="120">
		</el-table-column>
		<el-table-column
				prop="province"
				label="省份"
				width="120">
		</el-table-column>
		<el-table-column
				prop="city"
				label="市区"
				width="120">
		</el-table-column>
		<el-table-column
				prop="address"
				label="地址"
				width="300">
		</el-table-column>
		<el-table-column
				prop="zip"
				label="邮编"
				width="120">
		</el-table-column>
		<el-table-column
				fixed="right"
				label="操作"
				width="100">
			<template scope="scope">
				<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
				<el-button type="text" size="small">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>
	</div>


	<div v-show="!showList">

		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="活动名称" prop="name">
				<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			<el-form-item label="活动区域" prop="region">
				<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="活动时间" required>
				<el-col :span="11">
					<el-form-item prop="date1">
						<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col class="line" :span="2">-</el-col>
				<el-col :span="11">
					<el-form-item prop="date2">
						<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
					</el-form-item>
				</el-col>
			</el-form-item>
			<el-form-item label="即时配送" prop="delivery">
				<el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
			</el-form-item>
			<el-form-item label="活动性质" prop="type">
				<el-checkbox-group v-model="ruleForm.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式" prop="desc">
				<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" >立即创建</el-button>
				<el-button >重置</el-button>
			</el-form-item>
		</el-form>

	</div>

	<el-button
			type="primary"
			@click="openFullScreen"
			v-loading.fullscreen.lock="fullscreenLoading">
		显示整页加载，3 秒后消失
	</el-button>

</div>
</body>


<script type="text/javascript">
    var vm =  new Vue({
        el : '#app',
        data : {
            showList: true,
            fullscreenLoading: false,
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            formInline: {
                user: '',
                region: ''
            },
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            }
        },
        methods : {
            add: function(){
                vm.showList = false;


            },
            onSubmit: function () {
                console.log('submit!');
            },
            openFullScreen: function() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
            }, 3000);
            }
        }


    })

</script>

</html>